<template>
    <div class="bodyy">
        <div class="header">
            <div style="display: flex; align-content: center;">
                <h3 style="padding-top:3px;">分类</h3>
                <van-search placeholder="请输入搜索关键词" style=" width:70%" @click="router.push('/sear')" />
            </div>
        </div>
        <div class="box">
            <div id="box_left">
                <ul>
                    <li v-for="item in cate" :key="item._id" @click="getTypeId(item._id)"
                        :style="ccid === item._id ? 'border-left:3px solid red' : ''">
                        {{ item.title }}
                    </li>
                </ul>
            </div>
            <div id="box_right">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div id="list_item" v-for="item in list1" :key="item._id"
                        @click="router.push(`/xiang?_id=${item._id}`)">
                        <div id="item_img">
                            <img :src="item.img" alt="" style="width:100%;height:100%">
                        </div>
                        <div id="item_con">
                            <div class="ctitle">{{ item.name }}&nbsp;&nbsp;100g/包</div>
                            <div class="cnew">好货上新</div>
                            <div class="cbtn">
                                <button style="background:rgb(239, 128, 130);color:white;border:none;">已省{{
                                    item.original - item.price }}元</button>
                                <button style="border:1px solid red;background:white">限购五份</button>
                            </div>
                            <div class="cfot">
                                <div class="cfot_left">
                                    <span style="color:red;">￥{{ item.price }}</span> <br>
                                    <span class="del">{{ item.original }}</span>
                                </div>
                                <div class="cfot_right">
                                    <div class="join">加入购物车</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 获取分类导航
const cate = ref([])
const list1 = ref([])
const ccid = ref("6729da8230207e26ec2456e4")
const getList = async () => {
    let { data } = await axios.get('http://localhost:3000/list', {
        params: {
            name: route.query.name
        }
    })
    list1.value = data.list.filter(item => item.cid._id == ccid.value)
}
const getCate = async () => {
    let { data } = await axios.get('http://localhost:3000/cate');
    cate.value = data.cate;
}
const search = async() => {
   
}

onMounted(() => {
    getList()
    getCate()
    if (route.query.name) {

    }


})
const getTypeId = (id) => {
    ccid.value = id;
    getList()
}
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            list.value.push(list1.value.length + 1);
        }
        loading.value = false;
        if (list.value.length >= 10) {
            finished.value = true;
        }
    }, 1000);
};

</script>

<style scoped lang="scss">
.bodyy {
    width: 100vw;
    height: 90vh;
}

.header {
    width: 100%;
    height: 60px;
}


.box {
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: space-between;

    #box_left {
        width: 25%;
        height: 100%;
        background: rgb(247, 247, 247);

        li {
            padding: 10px;
        }

        li:hover {
            border-left: 3px solid red;
        }
    }

    #box_right {
        width: 73%;
        height: 100%;

        #list_item {
            width: 100%;
            height: 160px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            border-bottom: 1px solid rgb(214, 214, 214);

            #item_img {
                width: 110px;
                height: 110px;
            }

            #item_con {
                width: 80%;
                height: 100%;
                color: rgb(117, 117, 117);
                margin-left: 10px;

                .ctitle {
                    width: 100%;
                    height: 50px;
                }

                .cnew {
                    width: 100%;
                    height: 20px;
                    color: red;
                }

                .cbtn {
                    width: 100%;
                    height: 30px;
                    margin-top: 10px;
                }

                .cfot {
                    width: 100%;
                    height: 65px;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 5px;

                    .cfot_left {
                        width: 35%;
                        height: 100%;

                        .del {
                            height: 10px;
                            line-height: 10px;
                            text-decoration: line-through;
                        }
                    }

                    .cfot_right {
                        width: 65%;
                        height: 100%;

                        .join {
                            width: 90%;
                            height: 30px;
                            line-height: 30px;
                            background: red;
                            color: white;
                            border-radius: 20px;
                            text-align: center;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}
</style>